::-webkit-scrollbar{width:1px;}
::-webkit-scrollbar-track{background-color:#bee1eb;}
::-webkit-scrollbar-thumb{background-color:pink;}
::-webkit-scrollbar-thumb:hover {background-color:#9c3}
::-webkit-scrollbar-thumb:active {background-color:pink}
body{
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif;
    background: #f7fafc;
    -webkit-font-smoothing: subpixel-antialiased;
}
.menu{
    position: absolute;
    margin-top: 18%;
    margin-left: 33%;
}
.menu h3{
    margin-left: 25%;
}
.menu h5{
    margin-left: 35%;
}
.menu button{
    margin-left: 15%;
}
li{
    list-style-type:none;
}
.chat{
    position: absolute;
    margin-top:6%;
    margin-left: 33%;
}
.chat .chatButton{
    margin-top: -3%;
    margin-left: 35%;
}
.chat .chatInput{
    margin-left: 10%;
}
.chat .chatInput input{
    min-width: 10%;
}
.chat .chatMessage{
    width: 120%;
    height: 350px;
    margin-left: -10%;
    overflow-y:scroll;
}
.chat .chatMessage ul{
    margin-left: 0px;
}
.badge{
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color:gainsboro;
    border-radius: 10px;
    margin-left: 36%;
}

.myMessage {
  max-width: 40%;
  font-size: 15px;
  font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  position:relative;
  margin-bottom: 1%;
  border: 1px solid #bee1eb;
  border-radius: 5px;
}

.myMessage:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  left: -5px;
  transform: rotate(230deg);
  border: 1px #bee1eb;
  border-style: solid solid none none;
}
.otherMessage {
  max-width: 40%;
  font-size: 15px;
  font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  position: relative;
  margin-bottom: 1%;
  margin-left: 58%;
  border: 1px solid pink;
  border-radius: 5px;
}

.otherMessage:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  border: 1px pink;
  border-style: solid solid none none;
}